<template>
	<el-dialog
		v-if="visible"
		title="团队返点明细"
		:visible="visible"
		width="900px"
		center
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<!-- 应收返点统计 -->
		<p class="name">
			{{ getFormateDate(tableData.reportDate) }}期团队返点统计
		</p>
		<div class="block-content">
			<ReportDetailTable
				teamFlag="team"
				:tableDataColumn="tableDataColumn1"
				:tableDataList="proxyRebateList"
			/>
		</div>
		<!-- 返点明细 -->
		<div class="mt10">
			<p class="name">
				返点明细
			</p>
			<div class="mt10">
				<ReportDetailTable
					teamFlag="team"
					:tableDataColumn="tableDataColumn2"
					:tableDataList="clubRebateList"
				/>
				<ReportDetailTable
					teamFlag="team"
					:tableDataColumn="tableDataColumn3"
					:tableDataList="insureRebateList"
				/>
				<ReportDetailTable
					teamFlag="team"
					:tableDataColumn="tableDataColumn4"
					:tableDataList="otherRebateList"
				/>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import list from '@/mixins/list'
export default {
	components: {
		ReportDetailTable: () => import('@/components/ReportDetailTable')
	},
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detailData: {
			type: Object,
			required: true
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
		// 格式:
		// detailData: {
		// 	proxyId:'935950203562270737',
		//  reportType:1,
		// 	reportDate:'20231124'
		// }
	},
	data() {
		return {
			proxyRebateList: [],
			clubRebateList: [],
			insureRebateList: [],
			otherRebateList: [],
			tableData: '',
			tableDataColumn1: [
				{
					prop: 'proxyName',
					label: '代理账号',
					minWidth: '80',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'personRebateAmount',
					label: '个人返点',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'childRebateAmount',
					label: '下级返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebateAmount',
					label: '团队返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				}
			],
			tableDataColumn2: [
				{
					prop: 'itemName',
					label: '项目',
					minWidth: '80',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'rebateAmount',
					label: '团队返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebate',
					label: '团队返点比例',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'amountWithTexasDetail',
					label: this.$t('common.service_charge'),
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amountWithTexasDetail'
				}
			],
			tableDataColumn3: [
				{
					prop: 'itemName',
					label: '项目',
					minWidth: '80',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'rebateAmount',
					label: '团队分成',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebate',
					label: '团队分成比例',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'amount',
					label: '代理净输赢',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				}
			],
			tableDataColumn4: [
				{
					prop: 'itemName',
					label: '项目',
					minWidth: '80',
					align: 'center',
					showTip: true,
					renderType: 'defautlSolt'
				},
				{
					prop: 'rebateAmount',
					label: '团队返点',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				},
				{
					prop: 'rebate',
					label: '团队返点比例',
					minWidth: '100',
					align: 'center',
					showTip: true,
					renderType: 'percentage'
				},
				{
					prop: 'amount',
					label: '团队有效投注',
					minWidth: '90',
					align: 'center',
					showTip: true,
					renderType: 'amount'
				}
			]
		}
	},
	mounted() {
		this.getProxyRebateDetailList()
	},
	methods: {
		// 关闭
		handleClose() {
			this.closeDialog(false)
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		// 本期返点明细
		getProxyRebateDetailList() {
			this.tableLoading = true
			this.proxyRebateList = []
			const params = {
				...this.detailData
			}
			this.$api
				.proxyRebateDataDetail(params)
				.then((res) => {
					this.tableData = res?.data || []
					let e1 = {
						proxyName: this.tableData.proxyName,
						personRebateAmount: this.tableData.personRebateAmount,
						childRebateAmount: this.tableData.childRebateAmount,
						rebateAmount: this.tableData.rebateAmount
					}
					this.proxyRebateList.push(e1)
					for (let index in this.tableData.list) {
						let e = this.tableData.list[index]
						if (e.itemName.indexOf('俱乐部') != -1) {
							this.clubRebateList.push(e)
						} else if (e.itemName.indexOf('保险') != -1) {
							this.insureRebateList.push(e)
						} else {
							this.otherRebateList.push(e)
						}
					}
					this.proxyRebateList.this.tableLoading = false
				})
				.catch(() => {
					this.tableLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
	color: #303133;
	margin-bottom: 10px;
}
.block-content {
	position: relative;
	width: 100%;
	margin-top: 10px;
	word-break: break-all;
}
</style>
